<template>
	<view class="uni_box home">
		<navbar title='添加地址'>
		</navbar>
		<view class="content">
			<view class="addtuan">
				<view class="aditem">
					<text class="addname">收货人</text>
					<u-input v-model="formData.name" type="text" placeholder='请输入收货人' />
				</view>
				<view class="aditem">
					<text class="addname">手机号</text>
					<u-input v-model="formData.mobile" type="text" placeholder='请输入手机号' />
				</view>
				<view class="aditem" @click="dishow=true">
					<text class="addname">所在地区</text>
					<text class="adaval" :class="formData.province.name?'yval':''">{{ formData.province.name?formData.province.name+formData.city.name+formData.area.name:'请选择所在地区' }}</text>
					<image class="comm_icon_next" src="@/pages_client/static/img/comm_icon_next.png" />
				</view>
			</view>
			<!-- <view class="zitem flex-col">
				<view class="zone alitem" @click="toCommunity">
					<text class="zhaoname">定位地点</text>
					<view class="ml flex-row">
						<text class="wanshan">编辑</text>
						<image class="icon_gd" src="@/pages_client/static/img/comm_icon_next.png" />
					</view>
				</view>
				<view class="zthree" v-if="formData.name">
					<view class="shutext">
						<image class="icon_dz" src="@/pages_client/static/img/comm_icon_next.png" />
						<text class="jianname">{{formData.name}}</text>
					</view>
				</view>
			</view> -->

			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">详细地址</text>
				</view>
				<view class="zthree">
					<view class="shutext">
						<textarea class="textarea" style="min-height: 150rpx;" v-model="formData.address" :auto-height="true" placeholder='输入详细地址'></textarea>
					</view>
				</view>
				<!-- <view class="zone alitem" style="margin-top: 20rpx;">
						<text class="zhaoname">找路指引(非必填)</text>
					</view>
					<view class="chuantu">
						<view class="tuview">
							<view class="tuitem">
								<image class="icon_zp" src="@/pages_admin/static/img_sp.png" mode="" />
								<text>上传视频</text>
							</view>
							<view class="tuitem">
								<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
								<text>上传照片</text>
							</view>
							<view class="tuitem tuchuan">
								<image class="icon_zp" src="@/pages_client/static/img/icon_fz.png" mode="" />
							</view>
						</view>
					</view> -->
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">设为默认地址</text>
					<view class="ml flex-row">
						<u-switch class="ml" size="40" v-model="formData.checked" active-color="#483C38"></u-switch>
					</view>
				</view>
			</view>


		</view>
		<view class="botbtn">
			<view class="btnview" @click="baocun">保存并使用</view>
		</view>
		<view class="diview">
			<Adresspop :dishow="dishow" @adressclose="dishow=false" @adressbtn="adressbtn"></Adresspop>
		</view>
		<!-- <u-select v-model="dishow" mode="mutil-column-auto" :list="dilist" @confirm="confirm"></u-select> -->
		
</view>
</template>

<script>
import Adresspop from '@/pages_client/components/Adresspop/Adresspop'
export default {
	components: {
		Adresspop
	},
	data() {
		return {
			min: 0, // 最小值范围
			max: 100, // 最大值范围
			minValue: 0, // 最小值滑块初始值
			// maxValue: 100, // 最大值滑块初始值
			value: 200,
			name: '',
			price: 0,
			phone: '',
			minnl: 16,
			maxnl: '不限',
			jobtypeshow: false,
			checked: true,
			isDeny:false,
			formData:{
				name:'',
				mobile:'',
				province_id:'',
				city_id:'',
				area_id:'',
				province:{
					id:'',
					name:''
				},
				city:{
					id:'',
					name:''
				},
				area:{
					id:'',
					name:''
				},
				address:'',
				checked:false,
				is_default:false,
				id:''
			},
			id:'',
			dishow: false,
		}
	},
	onLoad(option) {
		if(option.id!=''&&option.id!='undefined'){
			this.id = option.id
			this.gethuixian()
		}
	},
	onShow() {
	},
	methods: {
		async gethuixian(){
			
			let res = await this.$u.api.addressinfo({
				id:this.id
			});
			this.openCreateForm(res)
			
		},
		openCreateForm (obj1){
			// tabrow.value = obj1
			let obj2 = this.formData
			for (const key in obj1) {
				if (obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {
					obj2[key] = obj1[key];
				}
			}
			this.formData = obj2
			this.formData.id = obj1.id
			this.formData.checked = obj1.is_default==1?true:false
			console.log(this.formData)
		},
		endslider(e) {
			// console.log(this.value)
		},
		getgong() {
			this.jobtypeshow = true
		},
		toCommunity() {
			console.log("+++")
			const that = this
			uni.getSetting({
				success: (res) => {
					console.log(res)
					const status = res.authSetting
					// 如果当前设置是：不允许，则需要弹框提醒客户，需要前往设置页面打开授权
					if (!status['scope.userLocation']) {
						uni.showModal({
							title: "是否授权当前位置",
							content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
							success: (tip) => {
								if (tip.confirm) {
									// 如果已经拒绝过，则需要打开设置页面，授权弹框不会弹出第二次，因为已经明确拒绝/确认过了（微信的原因）
									if (that.isDeny) {
										uni.openSetting({
											success: function (res) {
												// 在设置页面授权成功后再次获取位置信息
												uni.showToast({
													title: "授权成功",
												})
												that.isDeny = false
												// 修改授权后返回页面，弹框消失，需要再点一次
											},
											fail: (data) => {
												console.log(data)
												// isDeny 是否拒绝过授权，如果拒绝过，再点击按钮的话，弹框确认后就直接打开微信小程序设置页
												that.isDeny = true
											}
										})
										return
									}
									// 如果点击了确认，并且没有拒绝过微信系统授权弹框，则会弹出授权位置信息的弹框
									uni.authorize({
										scope: "scope.userLocation",
										success: (data) => {
											// 授权弹框点击确认
											console.log(data)
											// 如果用户同意授权，则打开授权设置页面，判断用户的操作
											uni.openSetting({
												success: (data) => {
													// 如果用户授权了地理信息在，则提示授权成功
													if (data.authSetting['scope.userLocation'] === true) {
														uni.showToast({
															title: "授权成功",
															icon: "none",
															duration: 1000
														})
													}
												}
											})
										},
										fail: (data) => {
											// 如果用户拒绝授权，则提示用户需要授权
											uni.showToast({
												title: "您已拒绝授权，请重新授权",
												icon: "none",
												duration: 1000
											})
											that.isDeny = true
										}
									})
								}
							}
						})
					} else {
						uni.chooseLocation({
							success: (res) => {
								console.log(res)
								that.formData.name = res.name
								that.formData.address = res.address
								that.formData.longitude = res.longitude
								that.formData.latitude = res.latitude
							},
							fail: (e) => {
								console.log(e)
							}
						})
					}
				},
				fail: () => {
					that.isDeny = true
				},
			})
		},
		async baocun(){
			if(!this.formData.name){
				this.$u.toast("请输入姓名");
				return;
			}
			if(!this.formData.mobile){
				this.$u.toast("请输入手机号");
				return;
			}
			if(!this.formData.province_id){
				this.$u.toast("请选择省市区");
				return;
			}
			if(!this.formData.address){
				this.$u.toast("请编辑详细地址");
				return;
			}
			if(this.id){
				let res = await this.$u.api.addressedit({
					name:this.formData.name,
					mobile:this.formData.mobile,
					address:this.formData.address,
					is_default:this.formData.checked?'1':'0',
					province_id:this.formData.province_id,
					city_id:this.formData.city_id,
					area_id:this.formData.area_id,
					id:this.id
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
				}, 1000);
			}else{
				let res = await this.$u.api.addressadd({
					name:this.formData.name,
					mobile:this.formData.mobile,
					address:this.formData.address,
					is_default:this.formData.checked?'1':'0',
					province_id:this.formData.province_id,
					city_id:this.formData.city_id,
					area_id:this.formData.area_id,
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
				}, 1000);
			}
			
			
		},
		adressbtn(e){
			console.log(e)
			this.formData.province_id = e.provinceid
			this.formData.province.id = e.provinceid
			this.formData.province.name = e.province
			
			this.formData.city_id = e.cityid
			this.formData.city.id = e.cityid
			this.formData.city.name = e.city

			this.formData.area_id = e.areaid
			this.formData.area.id = e.areaid
			this.formData.area.name = e.area
		}


	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.content {
	background-color: #f5f5f5;
	padding: 30rpx 30rpx 130rpx;

	.zitem {
		padding: 30rpx;
		min-height: 110rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 24rpx;

		.zhaoname {
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
		}
	}

	.wanshan {
		font-weight: 500;
		font-size: 24rpx;
		color: #FF5F40;
		margin-right: 13rpx;
	}

	.wu {
		color: #999999;
	}

	.zone {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		flex-direction: column;
	}

	.icon_gd {
		width: 20rpx;
		height: 20rpx;
	}

	.flex-row {
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.alitem {
		align-items: center;
	}

	.ztwo {
		background: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.shiname {
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
			display: block;
			margin-bottom: 14rpx;
		}
	}

	.shutext {
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.icon_dz {
			width: 24rpx;
			height: 24rpx;
			margin-right: 5rpx;
		}

		.jianjie {
			color: #666;
			font-size: 28rpx;
			font-weight: 400;
		}

		.jianname {
			display: block;
			color: #333;
			font-weight: 500;
			font-size: 30rpx;
			margin-top: 5rpx;
		}
	}

	.xingbie {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 30rpx 0;

		.xbitem {
			width: 30%;
			height: 68rpx;
			background: #EEEEEE;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.zthree {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;

		.sheng {
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
		}

		.icon_dz {
			width: 32rpx;
			margin-right: 8rpx;
			height: 32rpx;
		}

		.shi {
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			display: block;
			margin-top: 8rpx;
		}
	}

	.fadan {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		display: block;
		margin-top: 12rpx;
		margin-bottom: 30rpx;
	}

	.shinav {
		display: flex;
		flex-direction: row;
		align-items: center;

		.shileft {
			border-radius: 10rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// width: 42%;
			flex: 1;
			// height: 130rpx;
			padding: 15rpx;

			.kname {
				color: #333;
				font-size: 25rpx;
				font-weight: 400;
			}

			.ktime {
				font-weight: 500;
				font-size: 38rpx;
				color: #111111;
			}

			/deep/.uni-input-input {
				min-height: 20px;
				font-size: 36rpx;
				font-weight: 500;
				color: #111;
			}
		}

		.shilian {
			display: flex;
			flex-direction: column;
			width: 180rpx;
			margin: 0 15rpx;
			justify-content: center;
			align-items: center;

			.lianone {
				position: relative;
				width: 100%;
				height: 37rpx;

				.ltxt {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 20rpx;
					color: #FF653F;
				}
			}

			.gong {
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				display: block;
				margin-top: 10rpx;
			}
		}
	}
}

.wrap {
	padding: 30rpx;
}

.chuantu {
	margin-top: 20rpx;
}

.chuanmiao {
	display: block;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	margin-top: 20rpx;
}

.tuview {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	.tuitem {
		margin: 0 30rpx 0 0;
		width: 160rpx;
		height: 160rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;

		.icon_zp {
			width: 56rpx;
			height: 56rpx;
			margin-bottom: 20rpx;
		}

		text {
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
		}
	}

	.tuchuan {
		.icon_zp {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			margin-bottom: 0;
		}
	}
}

.gaoshe {
	background: #FFFFFF;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	padding: 20rpx 30rpx 10rpx;
	margin-bottom: 24rpx;

	.gaoitem {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		display: flex;
		flex-direction: row;
		align-items: center;

		.gaoleft {
			display: flex;
			flex-direction: column;

			.jiename {
				font-weight: 800;
				font-size: 28rpx;
				color: #111111;
			}

			.miao {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				display: block;
				margin-top: 10rpx;
			}
		}

		.gaoright {
			margin-left: auto;
			display: flex;
			flex-direction: row;
			align-items: center;

			.wei {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			.icon_gd {
				margin-left: 15rpx;
				width: 18rpx;
				height: 18rpx;
			}

			.kaiicon {
				display: none;
			}
		}

		.kai {
			.wei {
				font-weight: 500;
				font-size: 24rpx;
				color: #FF5F40;
			}

			.kaiicon {
				margin-right: 10rpx;
				width: 10rpx;
				height: 10rpx;
				background: #44BC6B;
				border-radius: 50%;
				display: inline-block;
			}
		}
	}

	.gaoitem:last-child {
		border-bottom: none;
	}
}

.xieyi {
	margin: 40rpx 0;
	display: flex;
	flex-direction: column;

	.xieiem {
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		display: block;
		margin-bottom: 8rpx;

		.xys {
			color: rgba(34, 160, 232, 1);
			display: inline-block;
			margin: 0 5rpx;
		}
	}
}

.henxu {
	display: flex;
	flex-direction: row;
	align-items: center;

	.hengleft {
		width: 100rpx;
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon_jh {
			width: 36rpx;
			height: 36rpx;

		}
	}

	.hengnav {
		display: flex;
		flex: 1;
		margin: 0 20rpx;
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 20rpx;
		align-items: center;
		position: relative;

		/deep/.uni-input-input {
			color: #111;
			font-size: 48rpx;
			font-weight: 500;
		}

		.danwei {
			font-weight: 500;
			font-size: 24rpx;
			color: #111111;
			// position: absolute;
			right: 12rpx;

		}
	}

}

.jishi {
	display: flex;
	margin-left: auto;

	.jiitem {
		margin-left: 40rpx;
		position: relative;
		padding-bottom: 10rpx;

		.jsname {
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}

		.hengbot {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 6rpx;
			background: #FF5F40;
			display: none;
			left: 0;

		}
	}

	.jactive {
		.jsname {
			color: #111111;

		}

		.hengbot {
			display: inline-block;

		}
	}
}

.fuli {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 20rpx;

	.fuitem {
		padding: 5rpx 20rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
		margin: 0 20rpx 20rpx 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.fuactive {
		color: #fff;
		background: #FF5F40;
	}
}

.badge-button {
	padding: 4rpx 6rpx;
	background-color: #ff6d00;
	color: #fff;
	border-radius: 10rpx;
	font-size: 22rpx;
	line-height: 1;
	position: relative;
	z-index: 4;
}

.icon_an {
	width: 48rpx;
	height: 62rpx;
}

.botbtn {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 120rpx;
	padding: 10rpx 30rpx auto;
	background-color: #fff;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;

	.btnview {
		width: 94%;
		height: 90rpx;
		background: #483C38;
		// background: linear-gradient(90deg, #FF8F39, #FF4D43);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
}

.huakuai {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: auto;

	.huaview {
		display: flex;
		flex-direction: column;
		width: 100%;

		.yanse {
			width: 100%;
			display: flex;
			flex-direction: row;
			height: 20rpx;
			position: relative;
			z-index: 2;
		}

		.huaone {
			width: 30%;
			height: 100%;
			background: linear-gradient(90deg, #FF9292, #F41C1C);
		}

		.huatwo {
			width: 25%;
			height: 100%;
			background: linear-gradient(90deg, #FEE161, #F4CF1C);
		}

		.huathree {
			width: 45%;
			height: 100%;
			background: linear-gradient(90deg, #60F49E, #40E284);
		}
	}

	.yanzi {
		display: flex;
		margin-top: 20rpx;
		flex-direction: row;

		.jone {
			position: relative;
			left: -15rpx;
		}

		.jtwo {
			margin-left: 20%;
		}

		.jthree {
			margin-left: 20%;
		}

		.jfour {
			margin-left: auto;
			position: relative;
			right: -15rpx;
		}

		.jia {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.newhua {
		position: absolute;
		width: 100%;
		top: 8rpx;
	}

	/deep/.u-slider {
		z-index: auto;
	}

}

.qhua {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
	display: block;
	text-align: center;
	margin-bottom: 20rpx;

}

.qjia {
	font-weight: 800;
	font-size: 28rpx;
	color: #111111;
	display: block;
	text-align: center;
	margin-bottom: 20rpx;

}
.addtuan{
	display: flex;
	flex-direction: column;
	// padding: 0 30rpx;
	.aditem{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 25rpx;
		min-height: 100rpx;

		.addname{
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			display: inline-block;
			width: 120rpx;
		}
		.comm_icon_next{
			width: 24rpx;
			height: 24rpx;
			margin-left: auto;
		}
		.adaval{
			color: #c0c4cc;
			font-size: 28rpx;
			font-weight: normal;
		}
		.yval{
			color: #333;
		}
	}
}

/deep/.huakuai {
	z-index: auto;
}

/deep/.u-slider__gap {
	background-color: transparent !important;
	z-index: 10;
}
/deep/ .diview.u-drawer-bottom {
	background-color: #fff !important;
	z-index: 10;
}
</style>
